<!--
 * @Author: wangming
 * @Date: 2021-05-18 15:26:12
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-19 16:56:54
 * @Description:万能页面设计
-->
<template>
  <layout :taglist="iframeModules" :menuList="menuList" v-show="showDesign">
    <template v-slot:context>
      <el-divider
        content-position="right"
        v-if="getNavName === 'template' && !!hmpageInfo.buttonLayout"
        >内容区</el-divider
      >
      <component
        :is="hmpageInfo.layout.type"
        v-if="!!hmpageInfo.layout && showDesign"
        :layout="hmpageInfo.layout"
        :formList="formList"
      >
      </component>
      <div
        class="temBtn"
        v-if="getNavName === 'template' && !!hmpageInfo.buttonLayout"
      >
        <el-divider content-position="right">底部操作区</el-divider>
        <div class="drawing-board">
          <customBtnLayout
            style="height: 80px"
            :deleteShow="false"
            :class="{
              active: hmpageInfo.buttonLayout.key === getModelForm.key,
            }"
            @click.native="handleAdd(hmpageInfo.buttonLayout)"
            class="laybox rel sz"
            :config="hmpageInfo.buttonLayout"
          ></customBtnLayout>
        </div>
      </div>
    </template>
    <template v-slot:rightModel="{ form }" v-if="showDesign">
      <!-- {{ form.isFormLayout }} -->
      <basics
        :form="form"
        :basicsConfig="
          form.isFormLayout
            ? basicsConfig
            : form.__config && form.__config.isSearchCom
            ? searchComConfig
            : universalConfig
        "
      >
      </basics>
    </template>
  </layout>
</template>
<script>
import layout from "./layout.vue";
import { iframeModules } from "./leftModel/tagConfig.js";
import universal from "./mainContent/universal/index.js";
import basics from "./rightModel/basics.vue";
import { basicsConfig } from "./rightModel/basics_config";
import { searchComConfig } from "./rightModel/components/hlSearch/search_com_config";
import { universalConfig } from "./rightModel/noform_config";
import { mapGetters, mapActions } from "vuex";
import customBtnLayout from "./mainContent/__layouts/index.vue";
export default {
  provide() {
    return {
      parentLayout: "hlLayout",
    };
  },
  computed: {
    ...mapGetters(["getNavName", "getModelForm"]),
    menuList() {
      const menuList = [
        {
          label: "大纲",
          icon: "iconfont icontree",
          value: 1,
          tagName: "syllabus",
        },
        {
          label: "组件",
          icon: "el-icon-setting",
          value: 2,
          tagName: "leftModel",
        },
      ];
      if (this.getNavName === "home") {
        menuList.push(
          {
            label: "模版",
            icon: "iconfont iconmoban1",
            value: 3,
            tagName: "Template",
          },
          {
            label: "历史",
            icon: "el-icon-time",
            value: 4,
            tagName: "historyText",
          },
          {
            label: "编排",
            icon: "",
            value: 5,
            tagName: "composerList",
          }
        );
      } else {
        menuList.push({
          label: "编排",
          icon: "",
          value: 3,
          tagName: "composerList",
        });
      }
      return menuList;
    },
  },
  components: { layout, ...universal, basics, customBtnLayout },
  props: {
    showDesign: {
      type: Boolean,
      default: true,
    },
    formList: {
      type: Array,
      default: () => [],
    },
    hmpageInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {},
  data() {
    return {
      iframeModules,
      universalConfig,
      basicsConfig,
      searchComConfig,
    };
  },
  methods: {
    ...mapActions(["setModelForm"]),
    handleAdd(value) {
      this.setModelForm(value);
    },
  },
};
</script>

<style lang="scss" scoped>
.temBtn {
  height: 200px;
  & > .drawing-board {
    padding: 24px;
    .laybox {
      border: 1px solid #f1f1f1;
    }
  }
}
</style>
